<template>
	<div class="home" :key="$route.path">
		<div id="nav">
            <div class="nav_header">
                <div class="nav1" @click="currentType = 'friendList'">好友</div>
                <div class="nav2" @click="currentType = 'roomList'">房间</div>
            </div>
            <component :is="currentType"></component>
		</div>
		<div class="info">
			<div class="number">总人数:{{ roomNum }}</div>
		</div>
	
	</div>
</template>

<script>
import Vue from "vue";
import friendList from './friendList'
import roomList from './roomList'

// @ is an alias to /src
export default {
	name: "chat",
    components:{
        friendList,
        roomList
    },
	data() {
		return {
			tip: [],
			rooms: [],
			roomNum: "",
			cusName: "",
			userName: "",
            currentType:"friendList"
		};
	},
	methods: {
		createRoom() {
			let user = JSON.parse(localStorage.getItem(chatUser));
			this.userName = user.admin;
			this.$axios({
				method: "post",
				url: "/users/createRooms",
				data: {
					roomName: this.cusName,
					roomMaster: this.userName,
				},
			}).then((res) => {});
			this.rooms.push({
				roomName: this.cusName,
				roomMaster: this.userName,
			});
			this.cusName = "";
		},
    
		//进入房间
		enter(index) {
			try {
				this.$router.push({
					path: "/roomChat",
					query: {
						roomMaster: this.rooms[index].roomMaster,
						curUser: this.curUser,
					},
				});
			} catch (e) {
				console.log(e)
			}
		},

		//注册账号
		register() {
			this.$router.replace({ name: "register" });
		},

       
	},

	watch: {
		// 监听路由变化
		$route() {
			setTimeout(() => {
				this.rooms = Vue.rooms;
			}, 100);
		},
	},
	created() {

	
	},
	mounted() {
        // this.requireAllUser()
	},
};
</script>
<style lang="less" scoped>
    .nav_header{
        padding: 10px 20px;
        display: flex;
        justify-content: space-around;
    }
</style>
